<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"></script>
  </head>
  <body>
    <div id="mse" class="artplayer-app"></div>
  </body>
</html>

<script>
  function playM3u8(video, url, art) {
    if (Hls.isSupported()) {
      if (art.hls) art.hls.destroy();
      const hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(video);
      art.hls = hls;
      art.on('destroy', () => hls.destroy());
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = url;
    } else {
      art.notice.show = 'Unsupported playback format: m3u8';
    }
  }

  let playerConfig = {
    artplayer: {
      container: '#mse',
      url: '',
      type: '',
      autoplay: true,
      playbackRate: true,
      fullscreen: true,
      pip: true,
      setting: true,
      flip: true,
      hotkey: true,
      isLive: false,
      plugins: [
        artplayerPluginDanmuku({
          speed: 5,
          danmuku: [
            {
              text: '111', // 弹幕文本
              time: 1, // 发送时间，单位秒
              color: '#fff', // 弹幕局部颜色
              border: false, // 是否显示描边
              mode: 0, // 弹幕模式: 0表示滚动, 1静止
            },
            {
              text: '222',
              time: 2,
              color: 'red',
              border: true,
              mode: 0,
            },
            {
              text: '333',
              time: 3,
              color: 'green',
              border: false,
              mode: 1,
            },
          ],
        }),
      ],
      customType: {
        customHls: playM3u8,
      },
    },
  };

  const playerMethod = {
    xgplayer: {},
    dplayer: {},
    artplayer: {
      barrge: (player, comments) => {
        setTimeout(() => {
          console.log(player.plugins);
          player.plugins.artplayerPluginDanmuku.config({
            danmuku: comments,
          });
          player.plugins.artplayerPluginDanmuku.load();
        }, 2000);
      },
      create: (options) => {
        Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 2];
        return new Artplayer({ ...options });
      },
    },
  };

  const mapVideoTypeToPlayerType = (videoType) => {
    switch (videoType) {
      case 'mp4':
        return 'customMp4';
      case 'flv':
        return 'customFlv';
      case 'm3u8':
        return 'customHls';
      default:
        return 'customHls';
    }
  };

  const playerCreate = async (url, type, container, playerMode, videoType) => {
    const isLive = type === 'iptv' ? true : false;

    const creators = {
      xgplayer: playerMethod.xgplayer.create,
      artplayer: playerMethod.artplayer.create,
      dplayer: playerMethod.dplayer.create,
    };

    let config = playerConfig[playerMode];
    const creator = creators[playerMode];
    if (playerMode === 'xgplayer') {
    } else if (playerMode === 'artplayer') {
      config.container = container;
      config.url = url;
      if (isLive) config.isLive = true;
      config.type = mapVideoTypeToPlayerType(videoType);
    } else if (playerMode === 'dplayer') {
    }

    return creator(config);
  };
  var art;
  (async () => {
    art = await playerCreate(
      'https://voddemo-play.volcvod.com/10501b001bdd43ae89d7c0fc3d6792b5/main.m3u8?a=0&auth_key=1773925042-f0489f7ac9a14d92b96bbfb7b39a7a0d-0-4e57d65b22e9aefe63ba1c519218e9fe&br=966&bt=966&cd=0%7C0%7C0&ch=0&cr=0&cs=0&cv=1&dr=0&ds=4&er=0&l=2023032020544973DCCFE21CF4C02E38B1&lr=&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amg6c2o0aTg6ZTQzNGRnM0ApOmZkZzg1PGVoNzhkOzxlZ2dfZy9gMHFrYTBgLS1kYy9zcy00L2JfL19eYF42Ly0vYi06Yw%3D%3D&vl=&vr=',
      'film',
      '#mse',
      'artplayer',
      'customHls',
    );
  })();
  setTimeout(() => {
    console.log(art);

    console.log(art.plugins);
    art.switch = 'https://svipsvip.ffzy-online5.com/20240510/27106_98545e53/index.m3u8';
    // playerMethod.artplayer.barrge(art, [
    //   {
    //     text: '111', // 弹幕文本
    //     time: 1, // 发送时间，单位秒
    //     color: '#fff', // 弹幕局部颜色
    //     border: false, // 是否显示描边
    //     mode: 0, // 弹幕模式: 0表示滚动, 1静止
    //   },
    //   {
    //     text: '222',
    //     time: 2,
    //     color: 'red',
    //     border: true,
    //     mode: 0,
    //   },
    //   {
    //     text: '333',
    //     time: 3,
    //     color: 'green',
    //     border: false,
    //     mode: 1,
    //   },
    // ]);
    // art.plugins.artplayerPluginDanmuku.config({
    //   danmuku: [
    //     {
    //       text: '111', // 弹幕文本
    //       time: 1, // 发送时间，单位秒
    //       color: '#fff', // 弹幕局部颜色
    //       border: false, // 是否显示描边
    //       mode: 0, // 弹幕模式: 0表示滚动, 1静止
    //     },
    //     {
    //       text: '222',
    //       time: 2,
    //       color: 'red',
    //       border: true,
    //       mode: 0,
    //     },
    //     {
    //       text: '333',
    //       time: 3,
    //       color: 'green',
    //       border: false,
    //       mode: 1,
    //     },
    //   ],
    // });
    // art.plugins.artplayerPluginDanmuku.load();
  }, 3000);

</script>
